<template>
  <div>
    <el-table :data="tableList" style="width: 100%">
      <el-table-column prop="date" label="订单日期"> </el-table-column>
      <!-- 表格内容, prop 与传入 数据数组中每一项对应 -->
      <el-table-column prop="ownerName" label="合作商"> </el-table-column>
      <el-table-column label="分成比例">
        <template slot-scope="scope">
          {{ scope.row.ratio + "%" }}
          <!-- 插槽写法, 与 prop="age" 效果相同, 特殊情况可使用 -->
        </template>
      </el-table-column>
      <el-table-column label="收入">
        <template slot-scope="scope">
          {{
            scope.row.orderTotalMoney > 0
              ? "+" + scope.row.orderTotalMoney/100
              : scope.row.orderTotalMoney/100
          }}
          <!-- 插槽写法, 与 prop="age" 效果相同, 特殊情况可使用 -->
        </template>
      </el-table-column>
      <el-table-column prop="orderCount" label="笔数"> </el-table-column>
      <el-table-column label="分成金额">
        <template slot-scope="scope">
          {{
            scope.row.totalBill > 0
              ? "+" + scope.row.totalBill/100
              : scope.row.totalBill/100
          }}
          <!-- 插槽写法, 与 prop="age" 效果相同, 特殊情况可使用 -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    // 数据列表
    tableList: {
      type: Array,
      require: true
    },
    // 页数, 渲染序号使用
    pageIndex: {
      type: Number,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  width: 100%;
  ::v-deep .el-table__header-wrapper {
    .el-table__header {
      width: 100% !important;
      thead tr {
        border-radius: 5px;
        overflow: hidden;
        th {
          background-color: #f3f6f8;
          color: #666;
          border: 0;
        }
      }
    }
  }
  ::v-deep .el-table__body-wrapper {
    .el-table__body {
      width: 100% !important;
      tbody tr td {
        border: 0;
      }
    }
  }
}
</style>
